﻿<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>系统登录</title>

<!--图标库 可无视-->
<link rel='stylesheet' href='../static/css/font-awesome.min.css'>

<!--核心样式-->
<link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src='../static/js/jquery.min.js'></script>
    <script src='../static/layui/layui.js'></script>
<style>
    body{
        overflow: hidden;
    }
</style>
</head>
<body>

<div class="container">
  <div class="card"></div>
  <div class="card">
    <h1 class="title">用户登录</h1>
    <form>
      <div class="input-container">
        <input type="text" id="username" required="required" />
        <label for="username">用户名</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="password" required="required" />
        <label for="password">密码</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button type="button" id="login"><span>登录</span></button>
      </div>
    </form>
  </div>
  <div class="card alt">
    <div class="toggle"></div>
    <h1 class="title">会员注册
      <div class="close"></div>
    </h1>
    <form id="my-form">
      <div class="input-container">
        <input type="text" id="username2" required="required" />
        <label for="#{label}">用户名</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="password2" required="required" />
        <label for="password2">密码</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="text" id="phone" required="required" />
        <label for="phone">手机</label>
        <div class="bar"></div>
      </div>
         <div class="input-container">
        <input type="email" id="email" required="required" />
        <label for="phone">邮箱</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button type="button" id="register" class="submit"><span >提交注册</span></button>
      </div>
    </form>
  </div>
</div>


</body>
<script>
    $(function () {
        $("#login").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();
            if ("" == username || undefined == username) {
                layer.msg("用户不能为空", {icon:7});
                return
            }
            if ("" == password || undefined == password) {
                layer.msg( "密码不能为空", {icon:7});
                return
            }
            $.ajax({
                type: 'GET',
                url: "/user/login_check",
                dataType: 'json', //服务端返回json格式的数据
                data: {'username': username, 'password': password},
                contentType: "application/json; charset=utf-8",
                success: function (data) { // 这里的data就是返回的json格式的数据
                    window.location.href ='/index'
                },
                error: function (xhr, type) {
                    layer.msg( "用户名或者密码不正确", {icon:5});
                }
            });

        })
        $("#register").click(function () {
            var username = $("#username2").val();
            var password = $("#password2").val();
            var phone = $('#phone').val();
            var email = $('#email').val()
            if ("" == username || undefined == username) {
                layui.msg("用户名不能为空",{icon:7});
                return
            }
            if ("" == password || undefined == password) {
                layer.msg("密码不能为空");
                return
            } if ("" == email || undefined == email) {
                layer.msg("邮箱不能为空");
                return
            }
            if ("" == phone || undefined == phone) {
                layer.msg("手机不能为空");
                return
            }

            $.ajax({
                type: 'POST',
                url: "/user/register",
                dataType: 'json', //服务端返回json格式的数据
                data: {'username':username,'password':password,'phone':phone,'email':email},
                success: function (data) { // 这里的data就是返回的json格式的数据
                    layer.msg('注册成功！',{icon:6})

                    setTimeout(function () {
                        window.location.href = "/"
                    }, 1000);

                },
                error: function (xhr, type) {
                    if (xhr.status == 401) {
                        document.getElementById('error').style.display = 'inline'
                    } else if (xhr.status == 403) {
                        layer.msg('用户已存在！2s后自动跳转到登录页面',{icon:7})
                        setTimeout(function () {
                            window.location.href = '/'
                        },2000)

                    }
                }
            });

        })
    })
</script>
<script>
    $(".toggle").on("click", function () {
        $(".container").stop().addClass("active");
    });

    $(".close").on("click", function () {
        $(".container").stop().removeClass("active");
    });
</script>
</html>

